<template>
	<view :class="curThemeType">
		<nav-bar :title="lang.personCenter" backState="2000"></nav-bar>
		<view class="userCenter">
			<view class="userAvater">
				<view class="userContent">
					
					<view class="headPortrait">
						<image class="headImg" :src="userInfo.accountPicture" @click="chooseImg"></image>
					</view>
					<view class="textContent">
						<view>{{userInfo.name}}</view>
						<br />
						<view class="textContentCollect">{{lang.collect}}：{{userInfo.number}}1</view>
					</view>
					<view class="userSetting">
						<view>
							<text class="cuIcon-settingsfill"  @click="handleToSetting"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="example-body">
				<view class='nav'>
					<!-- 导航栏 agents导航栏标题 -->
					<navTab ref="navTab" :tabTitle="['我的云端','云上社区','好友分享']" @changeTab='changeTab' v-if="hackReset"></navTab>
				</view>
				<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
				<swiper class="swiperStyle"  :current="currentTab" @change="swiperTab">
					<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<scroll-view class="scrollStyle" style="height: 100%;" scroll-y="true" scroll-with-animation :scroll-into-view="toView">
							<view class='content'>
								<view class='card' v-if="listItem.length > 0">
									<view class='smallcard' v-for="(item,index) in listItem" :key="index">
										<image :src="item.src"></image>
										<view>{{item.name}}</view>
									</view>
								</view>
							</view>
							<view class='noCard' v-if="listItem.length===0">
								暂无信息
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import navTab from '../components/navTab/navTab.vue';
	export default {
		components: {
			navTab,
		},
		computed: {
			...mapState([
				'lang',
				'curThemeType',
				'userInfo'
			])
		},
		data() {
			return {
				toView: '', //回到顶部id
				dynamicList: [],
				imgArr: [], //保存上传图片的信息
				currentTab: 0, //sweiper所在页
				hackReset:true,
				
				list: [
					[	//我的云
						{
							name: "one",
							src: "/static/logo.png"
						}, {
							name: "two",
							src: "/static/logo.png"
						}, {
							name: "two",
							src: "/static/logo.png"
						}, {
							name: "two",
							src: "/static/logo.png"
						}
					],
					//社区
					[
						
					],
					//分享
					[
						
					]
				], //数据格式
			}
		},
		onLoad() {
		},
		created() {
			//初始化list列表
			console.log("usercenterShow")
			//再要操作子组件时进行销毁重建,这样子组件生命周期会全部更新一遍
			//获取缓存数据
			//将本地缓存内数据取出赋给用户id
			//读取账号密码登录时的缓存
			uni.getStorage({
				key: "phoneData",
				success: res => {
					console.log("获取成功，phoneData为", res.data, this.userInfo.name);
					this.userInfo.name = res.data;
				},
				fail: () => {
					console.log('获取phoneData缓存失败');
				}
			})
			//读取微信登录时的缓存
			uni.getStorage({
				key: 'weixinData',
				success: res => {
					console.log("获取成功，weixinData为", res.data, this.userInfo.name);
					this.userInfo.name = res.data.nickName;
					this.userInfo.accountPicture = res.data.avatarUrl;
				}
			})
			this.hackReset = false;
			  this.$nextTick(() => {
			       this.hackReset = true;
			  })
		},
		methods: {
			handleTo(item) {
			},
			//上传头像
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res);
						this.imgArr = res.tempFilePaths;
						this.userInfo.accountPicture = this.imgArr[0];
					}
				})
				console.log("chooseImg");
			},
			//预览图片
			previewImg(current) {
				console.log(curre)
				uni.previewImage({
					current,
					urls: this.imgArr,
					loop: true,
					indicator: this.imgArr.length
				})
			},
			handleToSetting() {
				console.log("-----")
				uni.navigateTo({
					// url: './components/setting/components/personCenter'
					url:'../usercenter/components/setting/setting',
					animationType: 'pop-in',
					animationDuration: 1200
				});
				console.log("----111-")
			},
			changeTab(index) {
				this.currentTab = index;
			},
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
			},
		}
	}
</script>

<style lang="less" scoped>
	.userCenter {
		.userAvater {
			height: 150px;
			margin: 0 10px;
			margin-bottom: 10px;
			border-radius: 8px;
			.userContent {
				padding: 20px 20px;
				.headPortrait {
					float: left;
					height: 110px;
					width: 110px;
					.headImg {
						height: 100%;
						width: 100%;
						border-radius: 60rpx;
					}
				}
				.textContent {
					float: left;
					//background-color: red;
					width: 50%;
					padding-left: 20px;
					padding-top: 20px;
					.textContentCollect {
						/*#ifdef MP-WEIXIN*/
						padding-top: 80rpx;
						/*#endif*/
					}
				}
				.userSetting {
					//background-color: red;
					padding-top: 20px;
					text{
						font-size: 40rpx;
					}
				}
			}
		}
		.example-body {
			margin: 10px;
			border-radius: 8px;
			.nav {
				left: 0;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				font-size: 26rpx;
				border-radius: 8rpx 8rpx 0 0;
			}
			.swiperStyle{
				/*#ifdef H5 */
				height:32rem ;
				/*#endif*/
				/*#ifdef  MP-WEIXIN*/
				height:32rem ;
				/*#endif*/
				.scrollStyle{
					width: 95%;
					margin: 0 10px 42rpx 10px;
					border-radius: 5px;
					position: relative;
					.content {
						width: 100%;
						.card {
							.smallcard{
								float: left;
								width: 33%;
								height: 150rpx;
								padding-top: 20rpx;
								margin: auto;
								display: flex;
								align-items: center;
								justify-content: center;
								flex-direction: column;
								image{
									height: 80rpx;
									width: 80rpx;
									border-radius: 10rpx;
									padding-bottom: 10rpx;
								}
							}
						}
					}
					.noCard {
						height: 140rpx;
						margin: auto;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
		.image {
			font-size: 52rpx;
			
		}
		.text {
			font-size: 26rpx;
			margin-top: 10rpx;
		}
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
		.grid-item-box {
			flex: 1;
			/* position: relative;*/
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	}
</style>